import React, {
    Fragment,
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

import {
    Tip,
    Input,
    Loading,
    AgeRange
} from './../../../components';

import Footer from './components/footer';

import Container from './components/container';

import Options from '../../../const/options';
import Select from '../../home/filter/select';

import Connect from '../../../utils/connect';

import userAction from '../../../state/actions/user';
import * as userTypes from '../../../state/types/user';

interface Props {
    page:number,
    hasPre:boolean,
    userActions:any,
    onPageChange:Function
}

interface State {
    ageRange:Array<number>,
    gender:Array<number>
}

@Connect({
    userActions:userAction
})
class Seeking extends PureComponent<Props,State> {
    state = {
        gender:[],
        ageRange:[]
    }

    static defaultProps = {
        page:0,
        hasPre:true,
        userActions:{},
        onPageChange:() => null
    }

    get disabled() {
        const {
            gender,
            ageRange
        } = this.state;
        return !gender.length || !ageRange.length;
    }

    get ageLabel() {
        const {
            ageRange
        } = this.state;
        return [
            ageRange[0],
            ageRange[1]
        ].filter(v =>!!v).join(` - `);
    }

    get userActions() {
        const {
            userActions
        } = this.props;
        return userActions;
    }

    private onOpenRange = async () => {
        const {
            ageRange
        } = this.state;
        const {
            min,
            max
        } = await AgeRange(
            ageRange[0],
            ageRange[1]
        )
        this.setState({
           ageRange:[min,max]
        })
    }

    private toPrePage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page - 1);
    }

    private toNextPage = () => {
        const {
            page,
            onPageChange
        } = this.props;
        onPageChange(page + 1);
    }

    private getIds = (ids:Array<number>) => (
        [0,...ids].reduce(
            (a:number,b:number) => a + b
        )
    )

    private onItemChange = (filed:string) => (
        (value:string) => {
            const _state:any = {
                [filed]:value
            }
            this.setState(_state)
        }
    )

    private onSubmit = async () => {
        const {
            gender,
            ageRange
        } = this.state;

        const para = {
            matchAgeMin:ageRange[0],
            matchAgeMax:ageRange[1],
            matchGender:this.getIds(gender)
        }

        Loading.show();
        try {
            await this.userActions[
                userTypes.setUserProfile
            ](para);
            this.toNextPage();
        }
        catch (e) {
            Tip.warm({
                message:e.message
            })
        }
        Loading.close();
    }

    render() {
        const {
            gender
        } = this.state;

        const {
            hasPre
        } = this.props;

        return (
            <Fragment>
                <Container>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            Seeking for?
                        </Text>
                        <Select
                            value={gender}
                            options={Options.gender}
                            onChange={this.onItemChange(`gender`)}
                        />
                    </View>
                    <View style={styles.itemRow}>
                        <Text style={styles.title}>
                            Age range?
                        </Text>
                       <Input
                           disabled={true}
                           value={this.ageLabel}
                           placeholder="Age range"
                           onPress={this.onOpenRange}
                       />
                    </View>

                </Container>
                <Footer
                    showPre={hasPre}
                    nextPress={this.onSubmit}
                    disabled={this.disabled}
                    prePress={this.toPrePage}
                />
            </Fragment>
        )
    }
}

export default Seeking;

const styles = StyleSheet.create({
    itemRow:{
        marginBottom:40
    },
    title:{
        fontSize:20,
        color:`#000`,
        fontWeight:`bold`
    }
}) as any;